<template>
  <view class="quest" v-if="categoryList.jm">
    <view class="quest-title">
      <view class="quest-title-top">
        <img src="@/static/images/redbag.png" alt="" style="height: 30rpx; margin-right: 20rpx" />
        <text>{{ categoryList.jm.title }}</text>
      </view>
      <view class="quest-title-bottom">
        <view class=""
          >招募人数：<text style="color: #000">{{ categoryList.jm.receiveMax }}人</text>
        </view>
        <view class="" style="color: red; font-weight: bold; font-size: 30rpx"
          >￥<text style="fontsize: 36rpx">{{ categoryList.jm.price.toFixed(2) }}</text></view
        >
      </view>
    </view>
    <view class="quest-id">
      <text
        >任务编号：<text style="color: #000">{{ categoryList.jm.id }}</text></text
      >
      <img src="@/static/images/copy.png" alt="" @click="copy('任务编号：' + categoryList.jm.id)" />
    </view>
    <view class="quest-demand">
      <text class="after">任务要求</text>
      <view
        >生效时间：<text style="color: #000">{{ categoryList.jm.startDate }}</text></view
      >
      <view
        >结束时间：<text style="color: #000">{{ categoryList.jm.endDate }}</text></view
      >
    </view>
    <view class="quest-demand">
      <text class="after">订单信息</text>
      <view style="display: flex; justify-content: space-between; align-items: center">
        <view class="" style="margin-top: 0">
          订单编号：<text style="color: #000">{{ categoryList.job.id }}</text>
        </view>
        <img
          src="@/static/images/copy.png"
          alt=""
          @click="copy('订单编号：' + categoryList.job.id)"
          style="height: 40rpx"
        />
      </view>
      <view
        >下单时间：<text style="color: #000">{{ categoryList.job.createdTime }}</text></view
      >
      <view
        >任务状态：
        <uni-tag
          text="尚未提交"
          size="small"
          type="primary"
          inverted
          v-if="categoryList.job.status == 10"
        />
        <uni-tag
          text="待审核"
          size="small"
          type="primary"
          inverted
          v-if="categoryList.job.status == 20"
        />
        <uni-tag
          text="已完成"
          size="small"
          type="success"
          inverted
          v-if="categoryList.job.status == 60"
        />
        <uni-tag text="已关闭" size="small" inverted v-if="categoryList.job.status == 99" />
      </view>
      <view
        >状态说明：<text style="color: #000">{{ categoryList.job.income }}</text></view
      >
      <view style="display: flex; justify-content: space-between; align-items: center">
        <view style="margin: 0">
          提交通过：<text style="color: #000"
            >{{ categoryList.job.submitFinish }} / {{ categoryList.job.submitCount }}</text
          >
        </view>
        <text style="color: rgb(37, 131, 255)" @click="gorecords">查看所有提交记录？</text>
      </view>
      <view
        >累计到账：<text style="color: red; font-weight: bold"
          >{{ categoryList.job.income }} 元</text
        ></view
      >
    </view>
    <view class="quest-demand" v-if="categoryList.job.checkMsg">
      <text class="after">审核说明</text>
      <view
        >审核时间：<text style="color: #000">{{ categoryList.job.checkedTime }}</text></view
      >
      <view
        >审核说明：<text style="color: #000">{{ categoryList.job.checkMsg }}</text></view
      >
    </view>
    <view class="quest-description">
      <text class="after">任务描述</text>
      <view v-html="categoryList.jm.content"></view>
    </view>
    <view class="signup">
      <img src="@/static/images/wechat.png" alt="" @click="gokefu"/>
      <button @click="submit" v-if="categoryList.job.status == 10">提交审核</button>
      <button
        style="background-color: #9d61b4; width: 300rpx; margin-left: 20rpx"
        v-if="categoryList.job.status == 10"
        @click="cancel"
      >
        关闭任务
      </button>
      <button style="background-color: #e6831d" v-if="categoryList.job.status == 20">
        请等待审核结果
      </button>
      <button style="background-color: #53bb98" v-if="categoryList.job.status == 60">已完成</button>
      <button style="background-color: #9d61b4" v-if="categoryList.job.status == 99">已关闭</button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { orderget, jobjoin, jobstatus } from '@/services/home'
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { gokefu } from '@/utils/index';
const categoryList = ref<any>({})
const getHomeCategoryData = async () => {
  const currentPage = getCurrentPages().pop()
  const id = currentPage?.$page.options.id
  const res = await orderget({ id: id })
  if (res.success) {
    categoryList.value = res.data
  }
}
const copy = async (id: any) => {
  try {
    await navigator.clipboard.writeText(id)
    uni.showToast({ title: '复制成功！' })
  } catch (err) {
    uni.showToast({ title: '复制失败：' + err })
  }
}
const cancel = () => {
  uni.navigateTo({
    url: '/pagesMember/cancel/cancel?id=' + categoryList.value.job.id,
  })
}
const submit = () => {
  uni.navigateTo({
    url: '/pagesMember/submit/submit?id=' + categoryList.value.job.id,
  })
}
const gorecords = () => {
  uni.navigateTo({
    url: '/pagesMember/submitrecords/submitrecords?id=' + categoryList.value.job.id,
  })
}
onShow(async () => {
  await getHomeCategoryData()
})
</script>

<style lang="scss">
.signup {
  position: fixed;
  width: 100vw;
  height: 80rpx;
  bottom: 0;
  right: 0;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 40rpx;

  img {
    height: 80rpx;
  }

  button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80%;
    width: 80%;
    color: #fff;
    background-color: #ff1e3e;
    font-size: 26rpx;
  }
}

.button {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90rpx;
  height: 38rpx;
  font-size: 20rpx;
  line-height: 40rpx;
  color: #fff;
  background-color: #1e9fff;
  white-space: nowrap;
}

.quest {
  min-height: 100vh;
  padding: 20rpx;
  background-color: #f7f7f7;
  font-size: 24rpx;
  color: #999;
  padding-bottom: 100rpx;

  .quest-title {
    background-color: #fff;
    padding: 40rpx;
    border-radius: 10rpx;

    .quest-title-top {
      color: #000;
      font-size: 26rpx;
      font-weight: bold;
      display: flex;
      align-items: center;
    }

    .quest-title-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 30rpx;
    }
  }

  .quest-id {
    background-color: #fff;
    padding: 20rpx 40rpx;
    border-radius: 10rpx;
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    img {
      height: 40rpx;
    }
  }

  .quest-demand,
  .quest-description {
    background-color: #fff;
    padding: 20rpx 40rpx;
    border-radius: 10rpx;
    margin-top: 20rpx;

    .after {
      font-size: 28rpx;
      color: #000;
      position: relative;
      padding-left: 20rpx;
    }

    .after::after {
      content: '';
      position: absolute;
      left: 0rpx;
      top: 20%;
      height: 60%;
      border: 1px solid #00bb99;
    }

    view {
      margin-top: 30rpx;
    }
  }
}
</style>
